<template>
  <view class="content">
    <view>
      <view>
        <view class="header"><!-- <image src="./"></image> --></view>

        <view class="content11">
          <view>申请获取以下权限</view>
          <text>获得你的公开信息(昵称，头像等)</text>
        </view>

        <button
          class="bottom"
          type="primary"
          open-type="getUserInfo"
          lang="zh_CN"
          @getuserinfo="getUserInfo"
        >
          授权登录
        </button>
      </view>
      <!-- <view v-else>请升级微信版本</view> -->
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isHide: false,
      //判断小程序的API，回调，参数，组件等是否在当前版本可用。
      canIUse: wx.canIUse("button.open-type.getUserInfo"),
    };
  },
  methods: {
    //
    getUserInfo(e) {
      console.log("eeeeeeeeeeeee", e);
      if (e.detail.userInfo) {
        //用户按了允许授权按钮
        var that = this;
        // 获取到用户的信息了，打印到控制台上看下
        // console.log('用户的信息如下：' ,e.detail);

        // this.city = e.detail.userInfo.city;
        //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来

        that.isHide = false;

        uni.getUserInfo({
          success: function (res) {
            // 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值
            // 根据自己的需求有其他操作再补充
            // 我这里实现的是在用户授权成功后，调用微信的 wx.login 接口，从而获取code
            console.log("res :>> ", res);
            that.userInfo = res.userInfo;
            uni.login({
              success: (res) => {
                that.$u
                  .post("api/login/wx_login", {
                    code: res.code,
                  })
                  .then((res) => {
                    console.log("res1 :>> ", res);
                    that.openID = res.data;
                    console.log("that.openID :>> ", that.openID);
                    console.log("that.userInfo :>> ", that.userInfo);
                    that.$u
                      .post("api/users/user_info", {
                        info: that.userInfo,
                        openID: res.data,
                      })
                      .then((res) => {
                        console.log(111);
                        //console.log('uid :>> ', res.data);
                        that.uid = res.data;
                        console.log("that.uid1111111111 :>> ", that.uid);
                        try {
                          uni.setStorageSync("uid", res.data);
                        } catch (e) {
                          // error
                        }
                        console.log(222);
                        // uni.redirectTo({
                        // 	url:"../index/index"
                        // })
                        uni.reLaunch({
                          url: "../index/index",
                        });
                      });
                  });
              },
            });
          },
        });
      } else {
        //用户按了拒绝按钮
        console.log("用户按了拒绝按钮");
        uni.showModal({
          title: "警告",
          content: "您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!",
          showCancel: false,
          confirmText: "返回授权",
          success: function (res) {
            // 用户没有授权成功，不需要改变 isHide 的值
            if (res.confirm) {
              console.log("用户点击了“返回授权”");
            }
          },
        });
      }
    },
    //
  },

  onLoad() {
    var that = this;

    //
    // 检验、登录
    uni.checkSession({
      success: function () {
        console.log("111111111111111");
      },
      fail: function () {
        console.log("222222222222222");
        // 查看是否授权
        uni.getSetting({
          success: function (res) {
            if (res.authSetting["scope.userInfo"]) {
              uni.getUserInfo({
                success: function (res) {
                  // 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值
                  // 根据自己的需求有其他操作再补充
                  // 我这里实现的是在用户授权成功后，调用微信的 wx.login 接口，从而获取code
                  console.log("res :>> ", res);
                  that.userInfo = res.userInfo;
                  uni.login({
                    success: (res) => {
                      that.$u
                        .post("api/login/wx_login", {
                          code: res.code,
                        })
                        .then((res) => {
                          console.log("res1 :>> ", res);
                          that.openID = res.data;
                          console.log("that.openID :>> ", that.openID);
                          console.log("that.userInfo :>> ", that.userInfo);
                          that.$u
                            .post("api/users/user_info", {
                              info: that.userInfo,
                              openID: res.data,
                            })
                            .then((res) => {
                              //console.log('uid :>> ', res.data);
                              that.uid = res.data;
                              console.log("that.uid1111111111 :>> ", that.uid);
                              try {
                                uni.setStorageSync("uid", res.data);
                              } catch (e) {
                                // error
                              }
                            });
                        });
                    },
                  });
                },
              });
            } else {
              // 用户没有授权
              // 改变 isHide 的值，显示授权页面
              console.log("用户没有授权");
              that.isHide = true;
              console.log("that.isHide :>> ", that.isHide);
            }
          },
        });
      },
    });
    //
    try {
      const userLocation = uni.getStorageSync("userLocation");
      if (userLocation) {
        this.userLocation = userLocation;
      }
    } catch (e) {
      // error
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  // background-color: rgba(0,0,0,.2);
  overflow: hidden;
  .header {
    margin: 90rpx 0 90rpx 50rpx;
    // border-bottom: 1px solid #ccc;
    text-align: center;
    width: 650rpx;
    height: 300rpx;
    line-height: 450rpx;
  }

  .header image {
    width: 200rpx;
    height: 200rpx;
  }

  .content11 {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
  }

  .content11 text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
  }

  .bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
  }
}
</style>
